<template>
  <p-card :bordered="false" ref="sopMake">
    <!--头部信息-->
    <div class="table-page-search-wrapper">
      <p-form layout="inline">
        <p-row :gutter="24">
          <p-col :xl="6" :lg="8">
            <p-form-item label="工站编码">
              <p-input disabled :value="options.siteAttr.workstationCode" />
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-form-item label="工站名称">
              <p-input disabled :value="options.siteAttr.workstationName"/>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-form-item label="产品名称">
              <p-input disabled :value="$store.state.process.baseInfo.productName"/>
            </p-form-item>
          </p-col>
          <p-col :xl="6" :lg="8">
            <p-button type="primary" @click="onPreview">预览</p-button>
          </p-col>
        </p-row>
      </p-form>
    </div>
    <!--tabs-->
    <p-tabs v-model="tab">
      <!--工序BOM-->
      <p-tab-pane key="1" tab="工序BOM">
        <bom :options="options.bomData"/>
      </p-tab-pane>
      <!--操作步骤&注意事项-->
      <p-tab-pane key="2" tab="操作步骤&注意事项" force-render>
        <steps :options="options.stepData" :site-index="siteIndex" ref="step" />
      </p-tab-pane>
      <!--工装设备-->
      <p-tab-pane key="3" tab="工装设备">
        <resource :options="options.sourceData"/>
      </p-tab-pane>
      <!--图片-->
      <p-tab-pane key="4" tab="图片" force-render>
        <j-upload v-model="options.picturesData" ismulti-select />
      </p-tab-pane>
      <!--程序-->
      <p-tab-pane key="5" tab="程序">
        <program :options="options.gramData"/>
      </p-tab-pane>
    </p-tabs>
    <component 
      :is="view"
      ref="preview"
      v-model="visible"
      :options="options"
    /> 
  </p-card>
</template>

<script>
import mixins from './mixins'
import { getAction } from '@/api/manage'
export default {
  name: 'SopMake',
  mixins: [mixins],
  props: {
    options: {
      type: Object,
      default: {}
    },
    siteIndex: Object,
  },
  components: {
    Bom: () => import('./bom'),
    Steps: () => import('./steps'),
    Resource: () => import('./resource'),
    Program: () => import('./program'),
    JUpload: () => import('@/components/jeecg/JUpload'),
    Preview: () => import('./preview'),
    previewModal: () => import('./preview/previewModal')
  },
  data() {
    return {
      tab: '1',
      loadingPreview: false,
      attachments: [],
      view: '',
      visible: false
    }
  },
  watch: {
    visible(val) {
      if (!val) {
        this.loadingPreview = false;
      }
    }
  },
  methods: {
    loadData(params) {
      /* getAction('/mes-craft/craft/mesPeStationSopMake/queryMesPeSopMakePictureByMainId', params).then(res => {
        const attachments = []
        if (res && res.data) {
          res.data.forEach(item => {
            attachments.push({
              filePath: item.pictureUrl
            })
          })
        }
        this.attachments = attachments
      }) */
    },
    onPreview() {
      this.view = 'previewModal';
      this.visible = true;
      this.loadingPreview = true;
    }
  },
  mounted(){
  },
}
</script>
